<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>点击</button>
<script>
    /*为什么要用addEventListener()事件
    *1.传统的onXXX绑定事件的弊端：不能同时绑定多个事件
    * 2.addEventListener()可以绑定多个事件
    * */
    var btn = document.querySelector("button");
    var body = document.body;
    var h1 = document.createElement("h1");
    /* btn.onclick = function () {
         h1.innerHTML = "hello,world";
         body.appendChild(h1);
     }
     //1.onclick事件不能绑定多个事件
     btn.onclick = function () {
         body.style.backgroundColor = "blue";
     }*/
    //2.引入addEventListener的使用
    var func = function () {
        h1.innerHTML = "hello,world";
        body.appendChild(h1);
    }
    btn.addEventListener("click", func);

    btn.addEventListener("click", function () {
        body.style.backgroundColor = "blue";
    })
    btn.addEventListener("click", function () {
        console.log(this);
        //alert(this.value);
    })
</script>
</body>
</html>